<script setup lang="ts">
import { ref, h } from 'vue'

import type { VxeGridListeners, VxeGridProps } from '#/adapter/vxe-table'

import { Button, message, Spin, Input } from 'ant-design-vue'
import type { VbenFormProps } from '#/adapter/form'
import { useVbenVxeGrid } from '#/adapter/vxe-table'
import { useVbenModal } from '@vben/common-ui'
import { getGoodsPurchaseGoodsList } from '#/api/orderDeduction'

const data = ref<any>({
  query: {
    quick_search: '',
  },
  selectType: 'checkbox', // checkbox | radio
  visibleFields: [''],
})
const emit = defineEmits(['share-data'])

interface RowType {
  purchase_id: number
  purchase_sn: string
  caigou_id: string
  purchase_time: string
  supply_name: string
  // 添加其他字段根据需要
}

const formOptions: VbenFormProps = {
  collapsed: true,
  schema: [
    {
      component: 'Input',
      componentProps: {
        placeholder: '输入采购单号',
      },
      fieldName: 'quick_search',
      label: '采购单号',
      operator: 'LIKE',
    },
    // 可以添加更多搜索字段
  ],
  showCollapseButton: false,
  submitButtonOptions: {
    content: '查询',
  },
  submitOnChange: false,
  submitOnEnter: true,
}

const gridOptions: VxeGridProps<RowType> = {
  checkboxConfig: {
    highlight: true,
    reserve: true,
    showReserveStatus: true,
  },
  height: '600px',
  columns: [
    { type: 'checkbox', width: 70, fixed: 'left' },
    { field: 'goods_purchase_sn', title: '采购单号' },
    { field: 'goods_no', title: '货号' },
    { field: 'purchase_date', title: '下单日期' },
    { field: 'SupplyNa', title: '供应商' },
    { field: 'plan_total_num', title: '下单件数' },
    { field: 'expired_price', title: '超期预扣' },
    { field: 'price', title: '采购价' },
    { field: 'remark', title: '备注' },
  ],
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues) => {
        const { list, total } = await getGoodsPurchaseGoodsList({ ...data.value.query, page: page.currentPage, limit: 30 })

        return {
          items: list,
          total: total,
        }
      },
    },
  },
  toolbarConfig: {
    // @ts-ignore 正式环境时有完整的类型声明
    // search: true,
  },
  pagerConfig: {},
}

const gridEvents: VxeGridListeners<RowType> = {
  cellClick: ({ row }) => {
    // 可以添加点击事件
  },
}

const [Grid, gridApi] = useVbenVxeGrid({ gridEvents, gridOptions })

const [Modal, modalApi] = useVbenModal({
  class: 'w-3/5',

  onCancel() {
    modalApi.close()
  },
  onConfirm() {
    const checkData = gridApi.grid.getCheckboxRecords()
    emit('share-data', { list: checkData || [], shareType: 'material' })
    modalApi.close()
  },
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      const modalData = modalApi.getData<Record<string, any>>() || {}
      data.value = { ...data.value, ...modalData }
    }
  },
})
</script>
<template>
  <Modal title="选择采购单">
    <Grid>
      <template #toolbar-tools>
        <div>
          <Input type="text" placeholder="请输入单号" v-model:value="data.query.quick_search" @input="gridApi.reload()" />
        </div>
      </template>
    </Grid>
  </Modal>
</template>
